<template>
  <div class="app-container">
    <div class="title">欢迎进入vue3+node后台管理系统</div>
    <div class="list">
      <div class="item" v-for="(listItem) in list" :key="listItem.name" @click="router.push(listItem.path)">
        <div class="item-title">{{listItem.name}}</div>
        <el-space wrap :size="30">
          <el-text v-for="(textItem) in listItem.textList" :key="textItem" class="item-text" type="danger" size="large">{{ textItem }}</el-text>
        </el-space>
        <div class="item-btn"><el-button type="primary">{{listItem.btnName}}</el-button></div>
      </div>
    </div>
    <el-row type="flex" justify="center">
      <el-col :span="8">
        <div class="flex">
          <img class="img-icon" src="@/assets/images/gitee.png" alt="gitee">
          <el-link type="primary" target="_blank" href="https://gitee.com/MMinter/vue_node">https://gitee.com/MMinter/vue_node</el-link>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="flex">
          <img class="img-icon" src="@/assets/images/github.png" alt="gitee">
          <el-link type="primary" target="_blank" href="https://github.com/MMinters/vue_node">https://github.com/MMinters/vue_node</el-link>
        </div>
      </el-col>
    </el-row>
    <div class="flex">
      <img class="img-icon" src="@/assets/images/qq.png" alt="gitee">
      <el-link type="primary" target="_blank" href="https://gitee.com/MMinter/vue_node_wiki/wikis/vue+node%E4%BA%A4%E6%B5%81%E7%BE%A4">点击进入问题解答交流社区！</el-link>
    </div>
    <el-row type="flex" justify="center">
      <el-col :span="8">
        <div class="flex">
          <img class="img-icon" src="@/assets/images/vue.png" alt="gitee">
          <el-link type="primary" target="_blank" href="https://gitee.com/MMinter/vue_node_wiki/wikis/%E5%89%8D%E7%AB%AF%E5%8A%9F%E8%83%BD%E8%AF%A6%E8%A7%A3">点击进入前端功能详解</el-link>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="flex">
          <img class="img-icon" src="@/assets/images/node.png" alt="gitee">
          <el-link type="primary" target="_blank" href="https://gitee.com/MMinter/vue_node_wiki/wikis/%E5%90%8E%E7%AB%AF%E5%8A%9F%E8%83%BD%E8%AF%A6%E8%A7%A3">点击进入后端功能详解</el-link>
        </div>
      </el-col>
    </el-row>
    <div class="flex">
      <img class="img-icon" src="@/assets/images/update.png" alt="gitee">
      <el-link type="primary" target="_blank" href="https://gitee.com/MMinter/vue_node_wiki/wikis/vue3.0%E6%9B%B4%E6%96%B0%E6%97%A5%E5%BF%97%EF%BC%88%E6%8C%81%E7%BB%AD%E6%9B%B4%E6%96%B0%EF%BC%89">点击进入 VUE3 更新日志</el-link>
    </div>
    <div class="flex star">
      <img class="img-icon" src="@/assets/images/star.png" alt="gitee">
      <div >开源不易，点个Star是让作者更加有动力，谢谢！</div>
    </div>
  </div>
</template>
<script setup>
import { useRouter } from 'vue-router';
const router=useRouter()
const list=[
  {
    name:'便捷图标',
    textList:[
      'el默认图标',
      'svg自定义',
      '大小可控',
      '颜色可变',
    ],
    btnName:'便捷图标',
    path:'/icon'
  },
  {
    name:'动态菜单',
    textList:[
      '动态路由',
      '自定义菜单',
      '便捷字典',
      '多账户区分'
    ],
    btnName:'动态菜单',
    path:'/system/menu'
  },
  {
    name:'权限控制',
    textList:[
      '菜单权限',
      '角色权限',
      '指令权限',
      '函数权限',
    ],
    btnName:'权限控制',
    path:'/test/RoleApi'
  },
  {
    name:'文件管理',
    textList:[
      '可追溯位置',
      '统一管理',
      '类型区分',
      '拖拽排序'
    ],
    btnName:'文件管理',
    path:'/file/imgAdmin'
  },
  
  {
    name:'富文本编辑',
    textList:[
      '支持图片',
      '支持视频',
      '支持表情'
    ],
    btnName:'富文本编辑',
    path:'/ditor'
  },
  {
    name:'操作日志',
    textList:[
      '自动记录',
      'webSocket',
      '多设备同时连接'
    ],
    btnName:'操作日志',
    path:'/system/logs'
  }
]
</script>

<style lang="scss" scoped>
.title{
  font-size: 40px;
  font-weight: 700;
  text-align: center;
}
.list{
  @include myFlex(3);
  margin-top: 30px;
}
.item{
  padding: 10px 20px;
  border-radius: 10px;
  width: 250px;
  height: 230px;
  position: relative;
  cursor: pointer;
  transition: .5s;
  border: 1px solid  #eee;
  &:hover{
    box-shadow: 0 0 10px #999;
    padding-top: 15px;
  }
  .item-title{
    font-size: 30px;
    font-weight: 700;
    letter-spacing: 5px;
    text-align: center;
    background: linear-gradient(45deg, #ffffff, #b65300, #888804, #000000, #0000ff, #4b0082, #9400d3);
    background-size: 400% 400%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: rainbow 5s ease infinite;
    text-shadow: 0 0 5px rgba(255,255,255,0.5);
    margin-bottom: 20px;
  }
  .item-btn{
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    button{
      width: 100%;
      letter-spacing: 5px;
      border-top-left-radius: 0;
      border-top-right-radius: 0;
    }
  }
}
@keyframes rainbow {
  0% { background-position: 0% 50% }
  50% { background-position: 100% 50% }
  100% { background-position: 0% 50% }
}
.hint1{
  font-size: 20px;
  font-weight: 700;
  color: #d00202;
  margin-top: 50px;
  span{
    color: #666;
  }
}
.flex{
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 35px;
}
.img-icon{
  width: 50px;
  margin-right: 10px;
}
.star{
  img{
    width: 100px;
  }
  div{
    font-size: 26px;
    font-weight: 700;
    color: #c11c22;
  }
}
</style>

